<template>
	<view class="topNavBar">
		<!-- 
		    $u.addUnit(): 用于给值加上单位，如果值已有单位，则直接原样返回，如果值为数值，则加上unit参数的单位。
			$u.getPx(): 此方法用于返回带单位的值的数值结果，如果第二个参数为true，返回的结果将会带上px的单位
			$u.sys(): 获取设备信息
		 -->
		<!-- navBar固定到顶部和placeholder值为true才会显示占位容器(固定后防止塌陷) -->
		<view class="topNavBar_placeholder" v-if="placeholder && isFixed"
			:style="{height: $u.addUnit($u.getPx(height) + $u.sys().statusBarHeight, 'px')}">
		</view>
		<!-- 
		    规则:  
			isFixed值为true，开启顶部固定
			isFixed值为true，showGaussianBlur值为true，开启顶部固定navBar为磨砂背景
			showGaussianBlur值为false，不开启磨砂背景
			navBarBacColor值为不开启磨砂背景后自定义背景色，值类型String
		-->
		<view class="topNavBar_container jrTransition"
			:class="{ 'topNavBar_fixed': isFixed, 'frostedGlass': isFixed && showGaussianBlur}"
			:style="gaussianBlurStyle">
			<!-- 顶部安全区适配 -->
			<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
			<!-- 内容区域 -->
			<view class="topNavBar_content" :style="{'height': $u.addUnit($u.getPx(height), 'px'), 
			'paddingLeft': $u.addUnit($u.getPx(initMarginLeft), 'rpx')}">
				<slot name="freeLayout" v-if="showFreeLayout"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import props from './props.js'
	export default {
		name: "topNavBar",
		data() {
			return {};
		},
		props: props,
		methods: {
			// 获取等高元素的高度，可以通过ref和$refs来获取组件实例来获取
			get_placeholderHight() {
				return uni.$u.getPx(this.height) + uni.$u.sys().statusBarHeight
			}
		},
		computed: {
			// 判断是否开启磨砂背景，不开启为自定义背景色
			gaussianBlurStyle() {
				return this.showGaussianBlur ?
					'background-color: rgba(225, 225, 225, 0.35)' :
					`background-color:${this.navBarBacColor}`
			},
			// 
			initMarginLeft() {
				return this.$globalStyle.globalPadding_lr;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topNavBar {
		width: 100%;

		// 占位容器
		&_placeholder {
			width: inherit;
		}

		// fixed
		&_fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 11;
		}

		// 主体内容
		&_content {
			box-sizing: border-box;
		}
	}
</style>
